<template>
  <div class="nav-box wrap scrollBar">
    <div class="title">运行状态</div>
    <div class="refresh clearfix">
      <div class="left">
        <img src="~@/assets/images/iconAll/point.png" alt="" />
        <span>系统已运行{{ day }}天, 最近一次启动时间{{ time }} !</span>
      </div>
      <div class="right"><button>刷新</button></div>
    </div>
    <!-- main -->
    <div class="main-box">
      <div class="tip1" @click="detail(1)">
        <span>{{ netNumber }}</span>
      </div>
      <div class="tip2" @click="detail(2)">
        <span>{{ ipNumber }}</span>
      </div>
      <div class="tip3" @click="detail(3)">
        <span>告警数{{ warnNumber }}</span>
      </div>
      <div class="tip4" @click="detail(4)">
        <span>在线{{ online }}</span>
      </div>
      <div class="tip5" @click="detail(5)">
        <span>{{ status }}</span>
      </div>
    </div>
    <!-- 视联网 -->
    <el-dialog
      :title="netCard"
      :visible.sync="isNet"
      width="440px"
      center
      custom-class="shilian"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <span>视联网配置信息({{ netCard }})</span>
      </div>
      <div class="detailCon">
        <div><span>主消息号MAC：</span>{{ macAddress }}</div>
        <div><span>主消息号：</span>{{ mainMes }}</div>
        <div><span>协议类型：</span>{{ versions }}</div>
      </div>
    </el-dialog>
    <!-- ip -->
    <el-dialog
      :title="ipCard"
      :visible.sync="isIP"
      width="440px"
      center
      custom-class="shilian"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <span>IP配置信息({{ ipCard }})</span>
      </div>
      <div class="detailCon">
        <div><span>IP地址：</span>{{ ipAddress }}</div>
        <div><span>子网掩码：</span>{{ submask }}</div>
        <div><span>网关地址：</span>{{ netAddress }}</div>
        <div><span>DNS服务器1：</span>{{ server1 }}</div>
        <div><span>DNS服务器2：</span>{{ server2 }}</div>
      </div>
    </el-dialog>
    <!-- 告警 -->
    <el-dialog
      title="告警信息"
      :visible.sync="isReport"
      width="700px"
      center
      custom-class="shilian"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div class="detailCon1 scrollBar">
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
        <div>
          <span>{{ reportTime }}</span> {{ reportContent }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isReport = false">全部清除</el-button>
      </span>
    </el-dialog>
    <!-- 业务状态 -->
    <el-dialog
      title="虚拟终端"
      :visible.sync="isStatus"
      width="700px"
      center
      custom-class="shilian"
      top="25vh"
      :close-on-click-modal="false"
    >
      <div slot="title" class="header-title">
        <span>虚拟终端({{ lineCount }}/{{ totalCount }})</span>
      </div>
      <div class="detailCon1 scrollBar">
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
        <div>
          <span>{{ terminal }}</span> {{ terminalNum }}&nbsp;
          {{ terminalStatus }}
        </div>
      </div>
    </el-dialog>
    <!-- 系统状态 -->
    <el-dialog
      title="系统状态"
      :visible.sync="isSystem"
      width="960px"
      center
      custom-class="shilian"
      top="18vh"
      :close-on-click-modal="false"
    >
      <div class="detailCon2">
        <div>
          <div
            class="pie"
            id="chart"
            ref="cpuChart"
            :style="{ width: '310px', height: '200px', marginBottom: '20px' }"
          ></div>
          <div class="tName">CPU使用率</div>
        </div>
        <div>
          <div
            id="chart1"
            ref="memoryChart"
            :style="{ width: '310px', height: '200px', marginBottom: '20px' }"
          ></div>
          <div class="tName">内存使用率</div>
        </div>
        <div>
          <div
            id="chart2"
            ref="hardChart"
            :style="{ width: '310px', height: '200px', marginBottom: '20px' }"
          ></div>
          <div class="tName">硬盘空间使用率</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts-gl";
export default {
  name: "runningStatus", //用户管理
  data() {
    return {
      day: "365",
      time: "2021年8月25日15:53:50",
      netNumber: "60:f2:ef:f5:01:11", //视联网
      ipNumber: "192.168.1.10", //ip
      warnNumber: "3", //告警数
      online: "15", //在线
      status: "空闲", //状态
      netCard: "eth0", //网卡号
      isNet: false,
      macAddress: "00:2E:45:1B:55", //主消息号mac
      mainMes: "10xxxxxxx", //主消息
      versions: "64位", //协议类型
      isIP: false,
      ipCard: "eth1", //IP网卡号
      ipAddress: "192.168.xx.xx", //ip地址
      submask: "255.255.255.0", //子网掩码
      netAddress: "192.168.11.1", //网关地址
      server1: "8.8.8.8", //dns服务器
      server2: "114.114.114.114",
      isReport: false,
      reportTime: "2021年8月10日13:41:11", //告警时间
      reportContent: "虚拟终端账号 11111111111   离线", //告警内容
      isStatus: false,
      lineCount: 15, //虚拟终端在线数
      totalCount: 30, //总数
      terminal: "10xXXXXXXXX ",
      terminalNum: "6891200",
      terminalStatus: "可视电话业务",
      isSystem: false,
    };
  },
  methods: {
    detail(type) {
      if (type == 1) {
        this.isNet = true;
      } else if (type == 2) {
        this.isIP = true;
      } else if (type == 3) {
        this.isReport = true;
      } else if (type == 4) {
        this.isStatus = true;
      } else {
        this.isSystem = true;
        this.$nextTick(function () {
          this.cpuPie();
          this.memoryPie();
          this.hardPie();
        });
      }
    },
    //饼图
    cpuPie() {
      let chart = this.$refs.cpuChart;
      let myChart = echarts.init(chart);
      let mydata = [
        {
          value: 45,
          name: "空闲",
        },
        {
          value: 11,
          name: "cpu占用",
        },
      ];
      // 调用生成的option
      let option = this.optionData(mydata);
      myChart.setOption(option);
    },
    memoryPie() {
      let chart = this.$refs.memoryChart;
      let myChart = echarts.init(chart);
      let mydata = [
        {
          value: 45,
          name: "空闲",
        },
        {
          value: 40,
          name: "内存占用",
        },
      ];
      // 调用生成的option
      let option = this.optionData(mydata);
      myChart.setOption(option);
    },
    hardPie() {
      let chart = this.$refs.hardChart;
      let myChart = echarts.init(chart);
      let mydata = [
        {
          value: 45,
          name: "空闲",
        },
        {
          value: 2,
          name: "硬盘空间占用",
        },
      ];
      // 调用生成的option
      let option = this.optionData(mydata);
      myChart.setOption(option);
    },
    // 传入data 生成option
    optionData(data) {
      let option = {
        tooltip: {
          trigger: "item",
          // formatter: "{b} : {d}%",
          formatter: function (data) {
            return data.name + " : " + data.percent.toFixed(0) + "%";
          },
          textStyle: {
            fontSize: 12,
          },
        },
        series: [
          {
            name: "使用率",
            type: "pie",
            radius: "68%",
            center: ["50%", "50%"],
            clockwise: false,
            data: data,
            label: {
              normal: {
                // formatter: '{b} : {d}%',
                formatter: function (data) {
                  return data.percent.toFixed(0) + "%";
                },
                textStyle: {
                  color: "#999",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: data.length > 1 ? 2 : 0,
                borderColor: "#ffffff",
                color: function (params) {
                  var colorList = [
                    {
                      c1: "#B062EE", //管理#B062EE
                      c2: "#9A0CE1",
                      c3: "#641EFF",
                    },
                    {
                      c1: " #0EC2C1", //管理0EC2C1
                      c2: "#14FDE4",
                      c3: "#59E9E1",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 0.5,
                      color: colorList[params.dataIndex].c2,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c3,
                    },
                  ]);
                },
              },

              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        // color: ['#00acee', '#52cdd5', '#79d9f1', '#a7e7ff', '#c8efff'],
        backgroundColor: "#fff",
      };
      return option;
    },
  },
  mounted() {},
  watch: {},
  created() {},
};
</script>
<style lang="less">
.shilian {
  .el-dialog__header {
    padding-top: 15px;
  }
  .el-dialog__title,
  .header-title {
    font-size: 14px;
    color: #4c5967;
    font-weight: 600;
  }
  .detailCon {
    width: 300px;
    margin: 0 auto;
    div {
      color: #4c5967;
      margin-bottom: 15px;
      font-size: 14px;
      span {
        display: inline-block;
        width: 1.8rem;
        text-align: right;
      }
    }
  }
  .detailCon1 {
    width: 500px;
    height: 200px;
    margin: 0 auto;
    div {
      color: #4c5967;
      font-size: 14px;
      &:not(:last-child) {
        margin-bottom: 15px;
      }
      span {
        display: inline-block;
        width: 200px;
        text-align: right;
        margin-right: 15px;
      }
    }
  }
  .detailCon2 {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: space-evenly;
    .tName {
      font-size: 11.8px;
      color: #4c4d4e;
      text-align: center;
    }
  }
  .el-dialog__footer {
    padding-top: 0;
  }
  .el-dialog--center .el-dialog__body {
    padding: 20px;
  }
}
</style>
<style lang='less' scoped>
.nav-box {
  .title {
    color: #504a4a;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 15px;
    padding:0 0 5px 20px;
    border-bottom: 1px solid #E1E4EA;
  }
  .refresh {
    width: 100%;
    height: 65px;
    line-height: 65px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #5a6a8c;
    background-color: #fff;
    border-radius: 12px;
    .left {
      float: left;
      img {
        vertical-align: text-top;
        margin-right: 8px;
      }
    }
    .right {
      float: right;
      button {
        color: #fff;
        background-color: #0ec4b6;
        width: 80px;
        height: 30px;
        border: none;
        outline: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .main-box {
    margin-top: 15px;
    width: 100%;
    height: calc(100vh - 3.1rem);
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    div {
      width: 282px;
      height: 166px;
      position: relative;
      cursor: pointer;
      flex-grow: 1;
      span {
        font-size: 16px;
        color: #fff;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .tip1 {
      background: url("~@/assets/images/status/shilian.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
    }
    .tip2 {
      background: url("~@/assets/images/status/IP.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
    }
    .tip3 {
      background: url("~@/assets/images/status/gaojing.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
    }
    .tip4 {
      background: url("~@/assets/images/status/yewu.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
    }
    .tip5 {
      background: url("~@/assets/images/status/xitong.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
